<template>
  <el-form-item :label="element.label" :required="element.options.required">
    <template v-if="element.type === 'input'">
      <el-input
        :style="{ width: element.options.width }"
        :placeholder="element.options.placeholder"
        :clearable="element.options.clearable"
        :maxlength="element.options.maxLength"
        :disabled="element.options.disabled"
      >
        <template #prepend v-if="element.options.prepend">{{ element.options.prepend }}</template>
        <template #append v-if="element.options.append">{{ element.options.append }}</template>
      </el-input>
    </template>

    <template v-else-if="element.type === 'textarea'">
      <el-input
        type="textarea"
        :style="{ width: element.options.width }"
        :placeholder="element.options.placeholder"
        :rows="element.options.rows"
        :maxlength="element.options.maxLength"
        :disabled="element.options.disabled"
      />
    </template>

    <template v-else-if="element.type === 'number'">
      <el-input-number
        :style="{ width: element.options.width }"
        :min="element.options.min"
        :max="element.options.max"
        :step="element.options.step"
        :disabled="element.options.disabled"
      />
    </template>

    <template v-else-if="element.type === 'radio'">
      <el-radio-group :disabled="element.options.disabled">
        <el-radio
          v-for="item in element.options.options"
          :key="item.value"
          :label="item.value"
        >
          {{ item.label }}
        </el-radio>
      </el-radio-group>
    </template>

    <template v-else-if="element.type === 'checkbox'">
      <el-checkbox-group :disabled="element.options.disabled">
        <el-checkbox
          v-for="item in element.options.options"
          :key="item.value"
          :label="item.value"
        >
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-else-if="element.type === 'select'">
      <el-select
        :style="{ width: element.options.width }"
        :placeholder="element.options.placeholder"
        :clearable="element.options.clearable"
        :multiple="element.options.multiple"
        :disabled="element.options.disabled"
      >
        <el-option
          v-for="item in element.options.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </template>

    <template v-else-if="element.type === 'switch'">
      <el-switch :disabled="element.options.disabled" />
    </template>

    <template v-else-if="element.type === 'slider'">
      <el-slider
        :style="{ width: element.options.width }"
        :min="element.options.min"
        :max="element.options.max"
        :step="element.options.step"
        :show-stops="element.options.showStops"
        :disabled="element.options.disabled"
      />
    </template>

    <template v-else-if="element.type === 'date'">
      <el-date-picker
        :style="{ width: element.options.width }"
        :placeholder="element.options.placeholder"
        :clearable="element.options.clearable"
        :disabled="element.options.disabled"
        :format="element.options.format"
      />
    </template>

    <template v-else-if="element.type === 'time'">
      <el-time-picker
        :style="{ width: element.options.width }"
        :placeholder="element.options.placeholder"
        :clearable="element.options.clearable"
        :disabled="element.options.disabled"
        :format="element.options.format"
      />
    </template>

    <template v-else-if="element.type === 'rate'">
      <el-rate
        :max="element.options.max"
        :allow-half="element.options.allowHalf"
        :disabled="element.options.disabled"
      />
    </template>

    <template v-else-if="element.type === 'color'">
      <el-color-picker
        :show-alpha="element.options.showAlpha"
        :disabled="element.options.disabled"
      />
    </template>

    <template v-else-if="element.type === 'upload'">
      <el-upload
        :action="element.options.action"
        :multiple="element.options.multiple"
        :limit="element.options.limit"
        :accept="element.options.accept"
        :disabled="element.options.disabled"
      >
        <el-button type="primary">点击上传</el-button>
      </el-upload>
    </template>

    <template v-else-if="element.type === 'grid'">
      <el-row :gutter="element.options.gutter">
        <el-col
          v-for="(col, index) in element.columns"
          :key="index"
          :span="col.span"
        >
          <draggable
            class="fm-grid-col"
            :list="col.list"
            group="widget"
            item-key="key"
            :animation="200"
          >
            <template #item="{ element: item, index: itemIndex }">
              <div
                class="fm-grid-item"
                @click.stop="handleSelectGridItem(item)"
              >
                <widget-form-item :element="item" :config="config" />
              </div>
            </template>
          </draggable>
        </el-col>
      </el-row>
    </template>
  </el-form-item>
</template>

<script setup>
import draggable from 'vuedraggable'

defineProps({
  element: {
    type: Object,
    required: true
  },
  config: {
    type: Object,
    default: () => ({})
  }
})

const handleSelectGridItem = (item) => {
  console.log('Grid item selected:', item)
}
</script>

<style lang="scss" scoped>
.fm-grid-col {
  min-height: 100px;
  border: 1px dashed #ddd;
  border-radius: 4px;
  padding: 10px;
  background: #fafafa;
}

.fm-grid-item {
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>